@import "~scss/_mixins";

.popups {
    /* Common */

    .popup {
        .innerWrap { box-shadow: 0px 0px 0px 1px var(--color-shape-primary); }
		#loader { background: rgba(23, 23, 23, 0.5); }
    }
    
    /* PopupHelp */

    .popup.popupHelp {
		.head {
			.icon.mail { background-image: url('#{$themePath}/icon/social/mail0.svg'); }
			.icon.mail:hover { background-image: url('#{$themePath}/icon/social/mail1.svg'); }
		}

		.highlight { color: var(--color-system-accent-100); background: var(--color-shape-highlight-medium); }
		a:hover { color: var(--color-system-accent-100); }
	}

	/* PopupMigration */

	.popup.popupMigration {
		.qrWrap { background-color: var(--color-bg-secondary); }
	}

	/* PopupUsecase */

	.popup.popupUsecase {
		.page.pageList {
			.categories { background: var(--color-shape-tertiary); }
			.categories {
				.item { border-color: var(--color-shape-primary); }
				.item.hl { color: var(--color-text-inversion); }
				.item:hover, .item.active { background: var(--color-control-accent); color: var(--color-text-inversion); }
				.item:hover, .item.active {
					.icon.heart { background-image: url('#{$themePath}/icon/popup/usecase/heart1.svg'); }
					.icon.any { background-image: url('#{$themePath}/icon/popup/usecase/any1.svg'); }
				}

				.item {
					.icon.heart { background-image: url('#{$themePath}/icon/popup/usecase/heart0.svg'); }
					.icon.any { background-image: url('#{$themePath}/icon/popup/usecase/any0.svg'); }
				}

				.icon.arrow { background-image: url('#{$themePath}/arrow/usecaseCategory0.svg'); }
				.icon.arrow:hover { background-color: var(--color-control-accent); background-image: url('#{$themePath}/arrow/usecaseCategory1.svg'); }
			}
		}

		.page.pageItem {
			.screenWrap {
				.icon.arrow { background-color: var(--color-bg-secondary); background-image: url('#{$themePath}/arrow/usecase.svg'); }
			}
		}
	}

	/* PopupMembership */

	.popup.popupMembership {
		.sides {
			.side.left { background: var(--color-shape-tertiary) !important; }
			.side.left {
				.contentList {
					li::before { background-image: url('#{$themePath}/icon/payment/tick.svg'); }
				}
			}
		}
	}

	/* PopupShare */

	.popup.popupShare {
		.content::before { display: none; }
		.content::after { background-image: url('#{$themePath}/icon/popup/share/header.svg'); }
	}

	/* PopupOnboarding */

	.popup.popupOnboarding {
		.innerWrap { background: #20295c; }

		.steps {
			.step0 {
				.types {
					.type {
						.label { color: rgba(32, 41, 92, 0.5); }
					}
				}
			}

			.step1 {
				.swiper-button-prev,
				.swiper-button-next,
				.slideBack { background-image: url('#{$themePath}/icon/onboarding/primitives/arrow.svg'); }
			}
		}
	}

	/* PopupSpaceJoinByLink */

	.popup.popupSpaceJoinByLink {
		.icon { background-image: url('#{$themePath}/icon/menu/spaceCreate/join.svg'); }
	}
}
